<script setup>
import { computed, onMounted, ref, useSlots, nextTick } from 'vue'
import CardBoxComponentBody from '@/components/CardBoxComponentBody.vue'
import CardBoxComponentFooter from '@/components/CardBoxComponentFooter.vue'

const props = defineProps({
  rounded: {
    type: String,
    default: 'rounded-2xl',
  },
  flex: {
    type: String,
    default: 'flex-col',
  },
  hasComponentLayout: Boolean,
  hasTable: Boolean,
  isForm: Boolean,
  isHoverable: Boolean,
  isModal: Boolean,
})

const emit = defineEmits(['submit'])

const slots = useSlots()

const hasFooterSlot = computed(() => slots.footer && !!slots.footer())

const componentClass = computed(() => {
  const base = [
    props.rounded,
    props.flex,
    props.isModal ? 'dark:bg-slate-900' : 'dark:bg-slate-900/70',
  ]

  if (props.isHoverable) {
    base.push('hover:shadow-lg transition-shadow duration-500')
  }

  return base
})

const submit = (event) => {
  emit('submit', event)
}

const cardContent = ref(null)
defineExpose({
  cardContent,
})

onMounted(async () => {
  await nextTick()
  // cardContent.value.style.transform = 'translateX(1000px)'
  // cardContent.value.style.transition = 'all .5s ease-in-out'
  setTimeout(() => {
    cardContent.value.style.transform = 'translateX(0px)'
  }, 100)
})

</script>

<template>
  <div ref="cardContent" class="card">
    <component :is="isForm ? 'form' : 'div'" :class="componentClass" class="bg-white flex" @submit="submit">
      <slot v-if="hasComponentLayout" />
      <template v-else>
        <CardBoxComponentBody :no-padding="hasTable">
          <slot />
        </CardBoxComponentBody>
        <CardBoxComponentFooter v-if="hasFooterSlot">
          <slot name="footer" />
        </CardBoxComponentFooter>
      </template>
    </component>
  </div>
</template>

<style scoped>
.card {
  transform: translateX(1000px);
  transition: all 1s ease-in-out;
}
</style>
